<script setup lang="ts">
import axios from "@/axios";
// import { ElMessage } from "element-plus";
import { onMounted, ref } from "vue";
import SetUserRole from "./component/SetUserRole.vue";
import UserForm from "./component/UserForm.vue";
import { queryUserRoleMenuApi } from "@/api/user";
// const drawer = ref(false);
const tableData = ref<any>([]);
// const isEditor = ref(false);
const UserFormRef = ref<any>(null);
// const userFormRef = ref();
// const userFields = {
//   id: null,
//   username: "",
//   password: "",
// };
const SetUserRoleRef = ref<any>();
// let userForm = reactive(userFields);
const openDrawer = (data = null) => {
  // if (data) {
  //   isEditor.value = true;
  //   // userForm = JSON.parse(JSON.stringify(data));
  // } else {
  //   isEditor.value = false;
  // }
  // drawer.value = true;
  UserFormRef.value.open(data);
};

const getUser = async () => {
  const ret = await axios.get("/user");
  if (Array.isArray(ret)) {
    tableData.value = ret;
  }
};

const openSetUserRoleForm = (data: any) => {
  // console.log(data);
  SetUserRoleRef.value.open(data);
};

onMounted(() => {
  getUser();
});

// 提交表单
// const submitForm = async () => {
//   const ret = await axios.post("/user/create", userForm);
//   if (ret.status === 201) {
//     userForm = reactive(userFields);
//     drawer.value = false;
//     getUser();
//     ElMessage.success("添加成功");
//   } else {
//     console.log(ret);
//     const { message } = ret.response.data;
//     ElMessage.error(message);
//   }
// };

const deleteUser = async (scope: any) => {
  // console.log(scope.row.id);

  const ret = await axios.get("/user/remove", {
    params: {
      id: scope.row.id,
    },
  });
  console.log(ret);
  getUser();
};

// 查询用户角色菜单
const queryUserRoleMenu = async () => {
  const data = {userId:"41"}
  const ret = await queryUserRoleMenuApi(data);
  console.log(ret);
};

// const updateUser = async () => {
//   const ret = await axios.post("/user/update", userForm);
//   if (ret.status === 201) {
//     ElMessage.success("修改成功");
//     userForm;
//     getUser();
//     userForm = reactive(userFields);
//     drawer.value = false;
//   }
// };
</script>

<template>
  <UserForm ref="UserFormRef" />
  <SetUserRole ref="SetUserRoleRef" @update="getUser" />
  <div
    style="display: flex; justify-content: space-between; align-items: center"
  >
    <div class="card-header">用户管理</div>
    <div class="card-body">
      <el-button @click="queryUserRoleMenu()">queryUserRoleMenu</el-button>
      <el-button @click="openDrawer()">新增</el-button>
      <el-button @click="getUser()">刷新</el-button>
    </div>
  </div>
  <!-- <el-drawer v-model="drawer" title="I am the title" :with-header="false">
    <el-form
      ref="userFormRef"
      label-position="left"
      label-width="auto"
      :model="userForm"
      style="max-width: 600px"
    >
      <el-form-item label="用户名">
        <el-input v-model="userForm.username"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="userForm.password"></el-input>
      </el-form-item>
      <ElSpace>
        <el-button v-if="!isEditor" type="primary" @click="submitForm"
          >提交</el-button
        >
        <el-button v-else type="primary" @click="updateUser">修改</el-button>
      </ElSpace>
    </el-form>
  </el-drawer> -->
  <el-table :data="tableData" border style="width: 100%">
    <el-table-column prop="username" label="用户名" width="140" />
    <el-table-column prop="password" label="密码" />
    <el-table-column width="150">
      <template #default="scope">
        <el-button type="danger" size="small" @click="deleteUser(scope)"
          >删除</el-button
        >
        <el-button
          type="primary"
          size="small"
          @click="openSetUserRoleForm(scope.row.id)"
          >分配权限</el-button
        >
        <el-button type="primary" size="small" @click="openDrawer(scope.row)"
          >编辑</el-button
        >
      </template>
    </el-table-column>
  </el-table>
</template>
<style scoped lang="less"></style>
